<template>
    <div class="page" onselectstart="return false">
        <div class="addClass">
            <div>编辑标签</div>
        </div>
        <div class="body">
            <div>
                <a-cascader :options="options" @change="onChange" change-on-select placeholder="请选择" v-model="classify"
                    style="width:200px" />
            </div>
            <div class="bodyRight">
                <div class="bodyRightTitle">
                    <div><span>标签池</span></div>
                </div>
                <div class="bodyRightLabel" ref="addEditTabsRef">
                    <a-spin :spinning="isLoading">
                        <div>
                            <a-tag v-for="tabItem in tagsList" :key="tabItem.id" @close="deleteTag(tabItem)"
                                style="margin-bottom: 5px" @dblclick="handleDblClick(tabItem)" class="tabs">
                                <span class="tagname" v-if="!tabItem.isEditName">
                                    <div> {{ tabItem.tagName }}</div>
                                    <div title="删除"><a-icon type="close" @click.stop="removeLabel(tabItem)" /></div>
                                </span>
                                <a-input v-else class="noFilter" :ref="'input_' + tabItem.id" v-model="tabItem.tagName"
                                    :maxLength="22" @click="inputFocus(tabItem.id)" @pressEnter="sumbitLabel(tabItem)"
                                    placeholder="请输入标签名称" @blur="sumbitLabel(tabItem)"></a-input>
                            </a-tag>
                            <a-tag class="addTabs noFilter" @click="addTabs()" v-if="isAddShow && isEditDataId === null">
                                <a-icon type="plus" />
                            </a-tag>
                        </div>
                    </a-spin>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import Sortable from 'sortablejs'
export default {
    name: 'LabelManage',
    data() {
        return {
            classify: [],
            options: [
                {
                    value: 'zhejiang',
                    label: 'Zhejiang',
                    children: [
                        {
                            value: 'hangzhou',
                            label: 'Hangzhou',
                            children: [
                                {
                                    value: 'xihu',
                                    label: 'West Lake',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: 'jiangsu',
                    label: 'Jiangsu',
                    disabled: true,
                    children: [
                        {
                            value: 'nanjing',
                            label: 'Nanjing',
                            disabled: true,
                            children: [
                                {
                                    value: 'zhonghuamen',
                                    label: 'Zhong Hua Men',
                                },
                            ],
                        },
                    ],
                },
            ],
            isAddShow: true,
            tagsList: [],
            isLoading: false,
            isEditDataId: null,
        }
    },
    created() {
        //初始化调用查询接口
        this._mallQueryTagByGroupCodeApi()
    },
    methods: {
        onChange(a, b) {
            console.log(b[b.length - 1])
            if (b[b.length - 1].value !== 'xihu') this.classify = []
        },
        //行拖拽
        rowDrop() {
            const tbody = this.$refs.addEditTabsRef.querySelectorAll('.ant-spin-nested-loading .ant-spin-container div') // 元素选择器名称根据实际内容替换
            const _this = this
            Sortable.create(tbody[0], {
                sort: true,
                handle: '.tabs.ant-tag', //指定哪个类名的可以拖动
                animation: 300,  // ms, number 单位：ms，定义排序动画的时间
                filter: '.noFilter',  // 过滤器，不需要进行拖动的元素
                preventOnFilter: true, //  在触发过滤器`filter`的时候调用`event.preventDefault()`
                chosenClass: 'dropTabs',
                group: { name: 'name', pull: false, put: false },
                // 开始拖拽的时候
                onMove: function (/**Event*/evt, originalEvent) {
                    //如果拖拽到新增后面，则禁止拖拽
                    if (evt.related.getAttribute('class') === 'addTabs ant-tag') {
                        return false
                    }
                },
                onEnd(evt) {
                    var navIndex = Object.assign(_this.tagsList)
                    navIndex.splice(evt.newIndex, 0, navIndex.splice(evt.oldIndex, 1)[0])
                    _this.tagsList = navIndex
                    for (const index in _this.tagsList) {
                        _this.tagsList[index].tagSort = parseInt(index) + 1
                    }


                    for (const index in _this.tagsList) {
                        _this.tagsList[index].tagSort = parseInt(index) + 1
                    }
                    _this.isLoading = true
                    const data = []
                    _this.tagsList.forEach((item) => {
                        data.push({
                            id: item.id,
                            tagSort: item.tagSort,
                        })
                    })
                    //此处调调换顺序的接口
                    _this.$forceUpdate()
                    _this.$message.success('更换顺序成功！')
                    _this.isLoading = false
                },
            })
        },
        //新增标签
        addTabs() {
            if (this.isEditDataId !== null) {
                this.$message.warning('有标签未保存成功！')
                this.inputFocus(this.isEditDataId)
                return
            }
            const index = parseInt(this.tagsList.length + 1)

            const value = 99999
            const data = {
                id: value,
                tagName: '',
                //是否编辑
                isEditName: true,
                //排序
                tagSort: index,
            }
            this.tagsList.splice(index, 0, data)
            this.isEditDataId = value
            this.inputFocus(value)
        },
        //删除标签
        removeLabel(e) {
            const _that = this
            this.$confirm({
                title: '请确认是否删除“' + e.tagName + '”标签，该删除标签后，已关联该标签的模型失去该标签，请确认是否删除?”',
                //自定义按钮内容
                okText: '是',
                centered: true,
                cancelText: '否',
                okType: 'danger',
                onOk() {
                    _that.isLoading = true
                    //此处调删除接口
                    _that.$message.success('删除成功')
                    _that.isLoading = false
                },
                onCancel() { },
            })
        },
        //标签修改后提交
        sumbitLabel(item) {
            //如果是新增的没有值则删除该新增行
            if (item.id === 99999 && (item.tagName ?? '') === '') {
                this.tagsList = this.tagsList.filter((e) => e.id !== 99999)
                this.isEditDataId = null
                return
            }
            if ((item.tagName ?? '') === '') {
                this.$message.warning('请输入标签名称！')
                this.inputFocus(item.id)
                return
            }
            this.isLoading = true
            if (item.id === 99999) {
                //此处调新增接口
                this.isEditDataId = null
                item.isEditName = false
                this.$message.success('新增标签成功!')
                this.isLoading = false
            } else {
                //此处调修改接口
                item.isEditName = false
                this.isEditDataId = null
                this.$message.success('标签名称修改成功!')
                this.isLoading = false
            }
        },
        //触发双击事件
        handleDblClick(item) {
            if (this.isEditDataId !== null) {
                this.inputFocus(this.isEditDataId)
                return
            }
            item.isEditName = true
            this.$set(this.tagsList, this.tagsList.indexOf(item), item)
            this.isEditDataId = item.id
            this.inputFocus(item.id)
        },
        //焦点
        inputFocus(id) {
            this.$nextTick(() => {
                this.$refs['input_' + id][0].focus()
            })
        },
        //删除标签
        deleteTag(item) {
            console.log(item)
        },
        //查询标签
        _mallQueryTagByGroupCodeApi() {
            this.$nextTick(() => {
                this.rowDrop()
            })
            for (let index = 0; index < 50; index++) {
                this.tagsList.push({
                    "id": index,
                    "tagName": parseInt(index) + 1 + "级钢铁",
                    "tagSort": parseInt(index) + 1
                })
            }
        },
    },
}
</script>
  
<style lang="less" scoped>
.page {
    display: flex;
    flex-direction: column;

    .addClass {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px 10px 20px;

        div {
            font-weight: bold;
        }

        border-bottom: 1px solid #d9d9d9;
    }

    span {
        font-size: 14px;
    }


    .body {
        height: calc(100vh - 210px);
        width: 100%;
        padding: 34px 24px;
        display: flex;
        justify-content: space-around;


        .bodyRight {
            width: 80%;
            height: 100%;

            .bodyRightTitle {
                height: 40px;
                background: #f7f8fa;
                font-size: 14px;
                padding-left: 14px;
                border-radius: 4px 4px 0 0;
                display: flex;
                align-items: center;
                border-top: 1px solid #d9d9d9;
                border-left: 1px solid #d9d9d9;
                border-right: 1px solid #d9d9d9;
            }

            .bodyRightLabel {
                width: 100%;
                height: 90%;
                overflow-y: auto;
                border-bottom: 1px solid #d9d9d9;
                border-left: 1px solid #d9d9d9;
                border-right: 1px solid #d9d9d9;
                border-radius: 0 0 4px 4px;

                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: flex-start;

                /deep/ .ant-spin-container {
                    div:nth-child(1) {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                    }

                    display: flex;
                    flex-direction: row;
                }

                /deep/ .ant-tag {
                    background: none;
                }

                .addTabs {
                    margin: 10px 16px 0 10px;
                    width: 30px;
                    height: 28px;
                    border: 1px solid #1d953f;
                    border-radius: 34px;
                    font-size: 18px;
                    align-items: center;
                    display: flex;
                    justify-content: center;
                    line-height: 22px;
                    cursor: pointer;
                    color: #1d953f;
                }

                .dropTabs {
                    border: 1px solid #1890ff !important;
                    color: #1890ff;
                }


                .tabs {
                    margin: 10px 16px 0 10px;
                    width: 100px;
                    height: 28px;
                    border: 1px solid #e5e6eb;
                    border-radius: 34px;
                    font-size: 14px;
                    align-items: center;
                    display: flex;
                    line-height: 22px;
                    cursor: move;

                    .tagname {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                    }

                    i {
                        display: none;
                    }

                    &:hover {
                        i {
                            font-size: 16px;
                            color: red;
                            display: inline-block;
                        }
                    }
                }

                .chosen {
                    .tabs {
                        border: 1px solid #1890ff;
                        background-color: #fff !important;
                        color: #1890ff;
                        cursor: move;
                    }
                }
            }
        }
    }
}
</style>
  